<template>
  <div class="dialog">
  <el-dialog
    :model-value="props.visible"
    :title="props.title"
    :width="props.width+'px'"
    :before-close="onClose"
    append-to-body
    draggable="true"
    :close-on-click-modal="false"
  >
  <!-- 展示内容 -->
    <div class="container" >
        <slot name="content"></slot>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<script setup lang="ts">
//定义参数类型
interface DialogProps{
    title?:string,
    visible:boolean,
    width?:number,
    height?:number
}
//接受父组件传递的数据,withDefaults设置默认值，defineProps接受值
const props = withDefaults(defineProps<DialogProps>(),{
      title:'标题',
      visible:false,
      width:630,
      height:230
})
//注册事件
const emit = defineEmits(["onClose","onConfirm"])
//关闭弹框
const onClose = () =>{
    emit('onClose')
}
const onConfirm = () =>{
    emit('onConfirm')
}
</script>
<style lang="scss" scoped>
.dialog{
  max-height: 500px; /* 设置最大高度 */
  overflow-y: auto;  /* 允许垂直滚动 */
}
.container{
  overflow-x: initial;
  overflow-y: auto;
}
</style>
<!-- <style lang="scss" >
// 正确的 :deep() 用法
:global(.el-dialog) {
  border-radius: 7px !important;

  .el-dialog__header {
    border-radius: 7px 7px 0 0 !important;
    background-color: #009688 !important;

    .el-dialog__title {
      color: #fff !important;
      font-size: 16px !important;
      font-weight: 600 !important;
    }
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
  }

  .el-dialog__body {
    padding: 10px !important;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8eaec;
    padding: 10px !important;
  }
}
</style> -->

<!-- <style lang="scss" scoped>

:deep(.el-dialog) {
  border-radius: 7px !important;

  .el-dialog__header {
    margin-right: 0;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    background-color: #009688 !important;

    .el-dialog__title {
      color: #fff !important;
      font-size: 16px !important;
      font-weight: 600 !important;
    }
  }

  .el-dialog__headerbtn {
    .el-dialog__close {
      color: #fff !important;
    }
  }

  .el-dialog__body {
    padding: 10px !important;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8eaec !important;
    padding: 10px !important;
  }
}

</style> -->